<script setup>
import {getParam, getTime} from "@/util/util.js";
import {inject, reactive, ref, onMounted, onUnmounted} from "vue";
import {getVideoById, getVideoReview, getVideos2} from "@/api/ContentApi.js";
import {getUserInfo, getIsAttention} from "@/api/AuthApi.js";
import {ElMessage} from "element-plus";
import Share from "@/components/svg/Share.vue";
import ShareDialog from "@/components/dialog/ShareDialog.vue";
import BeanUtil from "@/util/BeanUtil.js";

const myUser = inject("myUser");
const isShow = inject("isShow");
const shareContent = reactive({});
const id = getParam("id");
const reviewDisplay = ref(true);
const reviewOrRecover = ref(true); // 为评论或者回复 true-评论 false-回复
const recoverId = ref(0); // 被回复评论ID
const recoverUsername = ref(''); // 回复用户名称
const videoObject = ref(null); // 视频对象
const videoContainer = ref(null); // 视频容器
const showFloatingVideo = ref(false); // 是否显示悬浮窗
const video = reactive({}); // 视频信息
const videos = ref([]); // 推荐视频
const content = ref(''); // 我的评论内容
const reviews = ref([]); // 评论
const user = reactive({}); // 发布者信息
const isAttention = ref(true); // 是否关注发布者


/**
 * 分享视频
 */
function sharing() {
  BeanUtil.copyObject({
    title: video.title,
    intro: video.intro,
    coverUrl: video.coverUrl,
    url: document.URL
  }, shareContent);
  isShow.shareDialog = true;
}


// 监听滚动事件，控制悬浮窗显示
function handleScroll() {
  if (videoContainer.value) {
    const rect = videoContainer.value.getBoundingClientRect();
    // 当视频容器顶部超出视口或底部进入视口时显示悬浮窗
    showFloatingVideo.value = rect.top < 0 || rect.bottom < 100;
    
    // 同步视频播放状态
    if (showFloatingVideo.value && videoObject.value) {
      const mainVideo = document.querySelector('.video-player');
      const floatingVideo = document.querySelector('.floating-video-player');
      
      if (mainVideo && floatingVideo) {
        // 如果主视频正在播放，则悬浮窗视频也播放
        if (!mainVideo.paused && floatingVideo.paused) {
          floatingVideo.currentTime = mainVideo.currentTime;
          floatingVideo.play();
        }
        // 如果主视频暂停，则悬浮窗视频也暂停
        else if (mainVideo.paused && !floatingVideo.paused) {
          floatingVideo.pause();
        }
      }
    }
  }
}

// 挂载时添加滚动监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  videoObject.value = document.querySelector("video");
});

// 卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

// 查询指定ID视频
getVideoById(id).then(resp => {
  //设置表格数据
  if(resp.code === 1) {
    for(let index in resp.data) {
      video[index] = resp.data[index];
    }
    // 设置网页标题
    document.title = video.title;
    // 查询视频发布者信息
    getUserInfo(video.userId).then(resp=>{
      //设置表格数据
      if(resp.code === 1) {
        for(let index in resp.data) {
          user[index] = resp.data[index];
        }
        // 查询是否关注
        getIsAttention(user.id).then(resp => {
          // 未关注
          if(resp.code !== 1) {
            isAttention.value = false;
          }
        }).catch(resp => {
          ElMessage({
            message: '查询关注失败！',
            type: 'warning'
          });
        });
      }
      else {
      }
    });
    // 查询视频评论
    getVideoReview(video.id).then(resp => {
      //设置表格数据
      if(resp.code === 1) {
        reviews.value = resp.data;
      }
      else {
      }
    });
  }
  else {
  }
});
// 查询推荐视频
getVideos2().then(resp => {
  videos.value = resp.data;
}).catch(resp => {
  ElMessage({
    message: '查询失败！',
    type: 'warning'
  });
})
</script>
<template>
  <div style="width: 1500px; margin: 0 auto; padding-top: 20px">
    <!-- 左侧 -->
    <div style="margin: 0 auto; width: 1100px; float: left; ">
      <div style="margin-bottom: 15px; letter-spacing: 5px; font-size: 25px; font-weight: 500">{{video.title}}</div>
      <div style="margin-bottom: 10px">
        <div style="float: left; margin-right: 15px; min-width: 44px; height: 20px">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin: 2px; float: left; color: #8c939d;">
            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
          </svg>
          <div style="line-height: 20px; float: left; color: #8c939d; font-size: 14px">{{video.tapNum}}</div>
        </div>
        <div style="float: left; color: #8c939d; font-size: 14px">{{getTime(video.setTime, 10)}}</div>
        <div style="clear: both"></div>
      </div>
      <div class="video" ref="videoContainer">
        <div v-if="video.needSMember&&myUser.member!==1&&video.videoUrl===''" class="video-member-required">
          请充值S会员&ensp;>&ensp;<span @click="myUser.id===0?href('/login'):href('/center')" class="video-member-link">去充值</span>
        </div>
        <video v-else ref="videoObject" :src="video.videoUrl" class="video-player" controls></video>
      </div>

      <!-- 视频评论 -->
      <h2>评论<span style="color: #9499A0; line-height: 46px; font-size: 14px; font-weight: 500; margin-left: 10px">{{video.reviewNum}}</span></h2>
      <div style="border-radius: 10px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2) inset; background-color: rgba(253, 253, 253, 1); padding: 25px 25px 25px 25px; min-height: 200px; overflow-y: auto;">
        <div v-if="reviews.length<=0" style="width: 100%; text-align: center; line-height: 80px;">发布第一条评论吧！</div>
        <div v-for="(review, index1) in reviews" style="width: 97%;">
          <div style="min-height: 40px">
            <img :src="myUser.avatarUrl" style="border-radius: 40px; width: 40px; height: 40px; float: left; margin-right: 10px;">
            <div style="font-size: 13px; color: #8c939d">{{review.username}}</div>
            <!-- 内容 -->
            <div style="width: 100%; margin-top: 5px; margin-left: 50px">{{review.content}}</div>
            <div style="font-size: 13px; color: #8c939d; float: right;">
              <!-- 时间 -->
              <span style="margin-right: 10px">{{getTime(review.setTime, 2)}}</span>
              <span class="recoverBtn" @click="recoverId=review.id;recoverUsername=review.username;reviewOrRecover=false">回复</span>
            </div>
          </div>
          <!-- 评论回复 -->
          <div v-for="(recover, index2) in review.videoRecoverList" style="margin-left: 60px; margin-top: 20px">
            <el-avatar :size="30" :src="myUser.avatarUrl" style="margin-right: 5px; float: left; margin-bottom: 20px"></el-avatar>
            <div style="font-size: 12px; color: #8c939d">{{recover.username}}</div>
            <!-- 内容 -->
            <div style="width: 100%">{{recover.content}}</div>
            <div style="font-size: 12px; color: #8c939d; float: right">
              <!-- 时间 -->
              <span style="margin-right: 10px">{{getTime(recover.setTime, 2)}}</span>
              <span class="recoverBtn" @click="recoverId=recover.id;recoverUsername=recover.username;reviewOrRecover=false">回复</span>
            </div>
          </div>
          <el-divider v-if="index1!==reviews.length-1"></el-divider>
        </div>
      </div>
      <!-- 评论框 -->
      <div v-if="reviewDisplay&&reviewOrRecover" class="comment-input-container">
        <span class="comment-label">评论</span>
        <input class="comment-input" type="text" v-model="content" placeholder="发表你的评论...">
        <el-button type="primary" class="comment-button" @click="review">发布</el-button>
      </div>
      <!-- 回复框 -->
      <div v-if="reviewDisplay&&!reviewOrRecover" class="comment-input-container">
        <input class="comment-input" type="text" v-model="content" :placeholder="'回复 @'+recoverUsername" style="width: 820px">
        <el-button type="primary" class="comment-button" @click="recover">回复</el-button>
        <el-button type="info" class="comment-button" @click="reviewOrRecover=true">取消</el-button>
      </div>
    </div>
    <!-- 右侧 -->
    <div style="float: left; width: 350px; margin: 0 0 0 50px;">
      <table style="width: 350px; height: 50px">
        <tbody>
          <tr>
            <td rowspan="2" width="50" @click="open('/others_center/index.html?id='+user.id)"><el-avatar :size="40" :src="user.avatarUrl" style="margin-top: 5px; margin-right: 10px;"></el-avatar></td>
            <td style="line-height: 30px; float: left">{{user.username}}</td>
            <td rowspan="2">
              <el-button v-if="myUser.id===0" type="primary" style="float: right; height: 30px; margin: 10px 0;" @click="pleaseLogin" round>关注</el-button>
              <el-button v-else-if="myUser.id!==user.id&&!isAttention" type="primary" style="float: right; height: 30px; margin: 10px 0;" @click="attention(user.id)" round>关注</el-button>
              <el-button v-else-if="myUser.id!==user.id&&isAttention" type="info" style="float: right; height: 30px; margin: 10px 0;" @click="notAttention(user.id)" round>已关注</el-button>
            </td>
          </tr>
          <tr>
            <td style="line-height: 20px; font-size: 12px; color: #8c939d;">粉丝数：{{user.fansNum}}</td>
          </tr>
        </tbody>
      </table>
      <el-divider></el-divider>
      <div style="min-height: 200px; width: 350px">{{video.intro}}</div>
      <div class="video-actions">
        <!-- 点赞 -->
        <div class="video_coin">
          <svg @click="likeOrNo" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="video-coin-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z" fill="currentColor"></path></svg>
          {{video.likeNum}}
        </div>
        <!-- 投币 -->
        <div class="video_coin">
          <svg @click="coinOrNo" width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="video-coin-icon" data-v-3b3ce5ad=""><path fill-rule="evenodd" clip-rule="evenodd" d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z" fill="currentColor"></path></svg>
          {{video.coinsNum}}
        </div>
        <!-- 收藏 -->
        <div class="video_coin">
          <svg @click="collectOrNo" width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="video-coin-icon" data-v-c9ebd4c8=""><path fill-rule="evenodd" clip-rule="evenodd" d="M19.8071 9.26152C18.7438 9.09915 17.7624 8.36846 17.3534 7.39421L15.4723 3.4972C14.8998 2.1982 13.1004 2.1982 12.4461 3.4972L10.6468 7.39421C10.1561 8.36846 9.25639 9.09915 8.19315 9.26152L3.94016 9.91102C2.63155 10.0734 2.05904 11.6972 3.04049 12.6714L6.23023 15.9189C6.96632 16.6496 7.29348 17.705 7.1299 18.7605L6.39381 23.307C6.14844 24.6872 7.62063 25.6614 8.84745 25.0119L12.4461 23.0634C13.4276 22.4951 14.6544 22.4951 15.6359 23.0634L19.2345 25.0119C20.4614 25.6614 21.8518 24.6872 21.6882 23.307L20.8703 18.7605C20.7051 17.705 21.0339 16.6496 21.77 15.9189L24.9597 12.6714C25.9412 11.6972 25.3687 10.0734 24.06 9.91102L19.8071 9.26152Z" fill="currentColor"></path></svg>
          {{video.collectNum}}
        </div>
        <!-- 分享 -->
        <div class="video_coin" @click="sharing">
          <Share class="share-icon" />
          分享
        </div>
      </div>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 推荐视频 -->
      <div style="position: sticky; top: 0;">
        <h3>推荐内容</h3>
        <div class="recommend-video" v-for="(value, index) in videos" @click="href('/video/index.html?id='+value.id)">
          <img class="recommend-video-img" :src="value.coverUrl">
          <div class="recommend-video-title">{{value.title}}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 悬浮视频窗口 -->
  <div v-if="showFloatingVideo && video.videoUrl" class="floating-video-container">
    <div class="floating-video-header">
      <div class="floating-video-title">{{video.title}}</div>
      <div class="floating-video-close" @click="showFloatingVideo = false">×</div>
    </div>
    <video :src="video.videoUrl" class="floating-video-player" controls></video>
  </div>
  
  <el-backtop :right="100" :bottom="100" visibility-height="800">
    <div style="height: 100%; width: 100%; text-align: center; line-height: 40px; font-size: 14px; color: #1989fa;">
      顶部
    </div>
  </el-backtop>
  <ShareDialog :share-content="shareContent"></ShareDialog>
</template>
<style scoped>
.app {
  overflow: scroll;
  height: 100vh;
}

/* 视频 */
.video {
  position: relative;
  width: 1100px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  margin-bottom: 30px;
}

.video-player {
  width: 100%;
  background-color: #000;
  display: block;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.video-player:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.video-member-required {
  width: 100%;
  height: 500px;
  background: linear-gradient(135deg, #f5f7fa, #e4e8f0);
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1) inset;
  text-align: center;
  line-height: 500px;
  user-select: none;
  font-size: 18px;
  color: #606266;
  transition: all 0.3s ease;
}

.video-member-link {
  color: #1989fa;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-member-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 推荐视频样式 */
.recommend-video {
  display: flex;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  background-color: #f9f9f9;
}

.recommend-video:hover {
  background-color: #f0f0f0;
  transform: translateX(5px);
}

.recommend-video-img {
  width: 120px;
  height: 70px;
  border-radius: 4px;
  object-fit: cover;
  margin-right: 10px;
}

.recommend-video-title {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #333;
}

/* 视频操作按钮容器 */
.video-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
  padding: 10px 0;
  width: 100%;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.video_coin {
  height: 28px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 28px !important;
  transition: 0.2s ease-out;
  color: #61666D;
  user-select: none;
  cursor: pointer;
  border-right: 1px solid #eee;
  padding: 0 5px;
}

.video_coin:last-child {
  border-right: none;
}

.video_coin:hover, .video_coin:hover .video-coin-icon, .video_coin:hover .share-icon {
  color: #00AEEC;
}

.share-icon {
  transform: scale(1.8);
  margin-right: 8px;
  transition: color 0.2s ease-out;
  color: #61666D;
}


/* 评论输入框样式 */
.comment-input-container {
  width: 100%;
  position: sticky;
  bottom: 10px;
  margin: 50px 0 20px 0;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.comment-label {
  font-size: 15px;
  font-weight: 500;
  margin-right: 15px;
  color: #333;
}

.comment-input {
  flex: 1;
  height: 36px;
  border: 1px solid #e0e0e0;
  border-radius: 18px;
  padding: 0 15px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.comment-input:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.comment-button {
  margin-left: 15px;
  height: 36px;
  border-radius: 18px;
  padding: 0 20px;
  font-size: 14px;
}

/* 回复按钮样式 */
.recoverBtn {
  cursor: pointer;
  color: #409EFF;
  transition: all 0.2s ease;
}

.recoverBtn:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 悬浮视频窗口样式 */
.floating-video-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  overflow: hidden;
  transition: all 0.3s ease;
}

.floating-video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
}

.floating-video-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.floating-video-close {
  font-size: 20px;
  color: #999;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.floating-video-close:hover {
  background: #e0e0e0;
  color: #666;
}

.floating-video-player {
  width: 100%;
  height: 180px;
  background: #000;
  display: block;
}
</style>
